<template>
  <view class="address-item">
    <view class="info" @click="$emit('select', address)">
      <view class="user-info">
        <text class="name">{{ address.recipientName || address.recipient }}</text>
        <text class="phone">{{ address.recipientPhone || address.phone }}</text>
        <text v-if="address.isDefault === 1" class="default-tag">默认</text>
      </view>
      <text class="address">{{ formattedAddress }}</text>
      <view class="tag" v-if="address.label">{{ address.label }}</view>
    </view>
    <view class="actions">
      <view class="action-btn default-btn" @click="$emit('setDefault', address.id)" v-if="address.isDefault !== 1">
        <text class="action-icon">★</text>
        <text class="action-text">设为默认</text>
      </view>
      <view class="action-btn edit-btn" @click="$emit('edit', address.id)">
        <text class="action-icon">✎</text>
        <text class="action-text">编辑</text>
      </view>
      <view class="action-btn delete-btn" @click="$emit('delete', address.id)">
        <text class="action-icon">🗑</text>
        <text class="action-text">删除</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import common from '@/utils/common.js';

const props = defineProps({
  address: {
    type: Object,
    required: true
  }
});

const formattedAddress = computed(() => {
  return common.formatAddress(props.address);
});

defineEmits(['select', 'edit', 'delete', 'setDefault']);
</script>

<style scoped>
.address-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.info {
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.name {
  font-size: 34rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.phone {
  font-size: 30rpx;
  color: #333;
}

.default-tag {
  background-color: #ffcc00;
  color: #333;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-left: 20rpx;
}

.address {
  font-size: 30rpx;
  color: #333;
  line-height: 1.5;
  display: block;
  margin-bottom: 16rpx;
}

.tag {
  display: inline-block;
  font-size: 24rpx;
  color: #ffcc00;
  border: 1px solid #ffcc00;
  padding: 2rpx 16rpx;
  border-radius: 8rpx;
}

.actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #f5f5f5;
  padding-top: 20rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  margin-left: 40rpx;
  padding: 10rpx;
}

.action-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.action-text {
  font-size: 28rpx;
  color: #666;
}

.default-btn .action-icon {
  color: #ffaa00;
}

.edit-btn .action-icon {
  color: #ffcc00;
}

.delete-btn .action-icon {
  color: #ff6b6b;
}
</style> 